import * as vscode from "vscode";
import path from "path";
import { colors } from "./colors";
import { mirServer, MirServerProvider } from "./extension";

type ColorType = { hex: string; number: string };

export class ColorsWebviewViewProvider {
  extensionPath = mirServer.context.extensionPath;

  resolveWebviewView(webviewView: vscode.WebviewView) {
    webviewView.webview.options = {
      enableScripts: true,
      localResourceRoots: [vscode.Uri.file(path.join(this.extensionPath, "webview/colors")), vscode.Uri.file(this.extensionPath)],
    };
    // 设置 Webview 的 HTML 内容
    webviewView.webview.html = this._getHtmlForWebview(webviewView.webview);

    // 处理 Webview 的消息
    webviewView.webview.onDidReceiveMessage(this.quickColor);
  }

  quickColor(color: ColorType) {
    if (vscode.window.activeTextEditor) {
      const { selection, document } = vscode.window.activeTextEditor;
      let selectedTxt = document.getText(new vscode.Range(selection.start, selection.end));
      if (selectedTxt.match(/\d+/g)) {
        selectedTxt = selectedTxt.replace(/\d+/g, color.number);
      } else {
        selectedTxt = color.number;
      }
      const edit = new vscode.WorkspaceEdit();
      edit.replace(document.uri, selection, selectedTxt);
      vscode.workspace.applyEdit(edit);
    }
  }

  _getHtmlForWebview(webview: vscode.Webview) {
    const scriptRenderPath = vscode.Uri.file(path.join(this.extensionPath, "webview/colors", "render.js"));
    const scriptRenderUri = webview.asWebviewUri(scriptRenderPath);
    const styleCSSPath = vscode.Uri.file(path.join(this.extensionPath, "webview/colors", "style.css"));
    const styleCSStUri = webview.asWebviewUri(styleCSSPath);
    return `<!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <link href="${styleCSStUri}" rel="stylesheet">
                <script>window.colors = ${JSON.stringify(colors)}; </script>
                <title>Colors View</title>
            </head>
            <body>
                 <script src="${scriptRenderUri}"></script>
            </body>
            </html>`;
  }
  activate() {}
}

export class ColorsViewProvider implements MirServerProvider {
  activate() {
    const provider = new ColorsWebviewViewProvider();
    mirServer.context.subscriptions.push(
      vscode.window.registerWebviewViewProvider("mir-script-language.colors-view", provider),
      vscode.commands.registerCommand("mir-script-language.hide-colors-view", () => {
        vscode.commands.executeCommand("setContext", "showColorsView", false);
      }),
      vscode.commands.registerCommand("mir-script-language.show-colors-view", () => {
        vscode.commands.executeCommand("setContext", "showColorsView", true);
      }),
      vscode.window.onDidChangeActiveTextEditor(() => {
        vscode.commands.executeCommand("setContext", "showColorsView", true);
      })
    );
  }
}
